<template>
  <div class="zbox">
    <div v-if="loading">加载中...</div>
    <div v-else-if="error">{{ error }}</div>
    <div v-else>
      <div class="live-container">
        <div data-v-29a4d929="" class="focus-actor"><div class="actor-avatar" style="background-image: url(&quot;https://s10.mogucdn.com/mlcdn/c45406/191005_200da6aiedaalb865ll6fig03gbfa_400x400.jpg_50x50.jpg&quot;);"><div class="actor-tag" style="background-image: url(&quot;undefined_50x50.jpg&quot;);"></div></div> <div class="info"><div class="actor-name lh-1">秒乐乐</div> <div class="online-num">热度 16425</div></div> <div class="actor-fans"><div class="focus-btn flex f-center">关注</div> <!----> <!----></div></div>

        <div data-v-29a4d929="" class="member-entry">
          <div data-v-04927175="" class="roll-view">
            <div data-v-04927175="" class="roll-view-animat-wrapper"
              style="transition: -webkit-transform 0.21s linear 8s, transform 0.21s linear 8s, -moz-transform 0.21s linear 8s; transform: translate3d(-103px, 0px, 0px);">
              <div class="roll-view-item" data-v-04927175="">
                <div class="flex f-cross-center">
                  <div class="task-num flex f-center">9</div>
                  <div class="intro">你有新任务</div>
                </div>
              </div>
              <div class="roll-view-item" data-v-04927175="">
                <div class="flex f-cross-center">
                  <img src="https://s10.mogucdn.com/mlcdn/c45406/180612_2179a29gf2cdgf8hjf8lc477ek71d_69x69.png"
                    class="diamond-icon">
                  <div class="intro-one">亲密值 30</div>
                </div>
                
              </div>
            </div>
          </div>
        </div>
        <div class="live-content">
 
          <!-- 替换为 flv.js 播放器 -->
          <video ref="videoElement"></video>
          <!-- <div class="live-sidebar">
          <div v-for="item in liveData.items" :key="item.id" class="item">
            <img :src="item.image" alt="Item" class="item-image" />
            <p>{{ item.name }}</p>
            <p>{{ item.price }}</p>
          </div>
        </div> -->
          <!-- <div class="comments-list">
          <div class="official-tip">
            宝宝，喜欢主播点赞哟，加购TA推荐的好货！蘑菇街绿色直播，禁止低俗、引诱、暴露等一切黄赌毒内容，警察叔叔24小时巡查哦~</div>
          <div class="comment notice flex f-cross-center">
          </div>
          <div class="comment notice flex f-cross-center">
            <div class="name">快乐的123456</div>
            <div class="intro">进房准备剁手了</div>
          </div>
          <div class="comment notice flex f-cross-center">
            <div class="name">快乐的123456</div>
            <div class="intro">进房准备剁手了</div>
          </div>
          <div class="comment notice flex f-cross-center">
            <div class="name">w***奥</div>
            <div class="intro">等悄悄加了购物车</div>
          </div>
          <div class="comment notice flex f-cross-center">
            <div class="name">w***奥</div>
            <div class="intro">等悄悄加了购物车</div>
        </div>
        <div class="comment notice flex f-cross-center">
          <div class="name">最初的悸动LU</div>
          <div class="intro">进房准备剁手了</div>    
        </div> 
        <div class="comment notice flex f-cross-center">
          <div class="name">最初的悸动LU</div>
          <div class="intro">进房准备剁手了</div>    
        </div> 
          <div class="comment notice flex f-cross-center">
            <div class="name">w***奥</div>
            <div class="intro">等悄悄加了购物车</div>
        </div>
      </div> -->
        </div>
        <footer data-v-29a4d929="" class="foot-section flex f-jc-sb">
          <div data-v-29a4d929="" class="flex">
            <div data-v-29a4d929="" class="icon-sell-bag"  @click="toggleLiveGouwu"> 
              <div data-v-29a4d929="" class="sell-bag-num"  @click="toggleLiveGouwu">3</div>
            </div>
            <div data-v-29a4d929="" class="comment-box"  @click="toggleInputBox">
              <span v-if="!showInputBox">说点什么...</span>
    <div v-else class="input-area">
      <input type="text" v-model="commentText" placeholder="在此输入评论..." @keyup.enter="submitComment" />
      <button @click="submitComment">发送</button>
    </div>
            </div>
          </div>
          <div data-v-29a4d929="" class="flex fans-click">
            <div data-v-29a4d929="" class="icon-Share"></div>
            <div data-v-29a4d929="" class="icon-comment" ></div>
          </div>
        </footer>
      </div>
      <div class="bf" v-if="kzxx"  @click="playVideo"><van-icon name="play-circle-o" /></div>
      <div class="bf" v-if="!kzxx" @click="zt"><van-icon name="pause-circle-o" /></div>
    </div>
  </div>
    <LiveGouwu v-if="showLiveGouwu" @close="showLiveGouwu = false" class="live-gouwu-container centered-bottom-modal"/>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, computed, onUnmounted } from 'vue';
import LiveGouwu from './LiveGouwu.vue';
import axios from 'axios';
import flvjs from 'flv.js'; // 假设你已经通过 npm 或 yarn 安装了 flv.js
// 响应式引用
const showLiveGouwu = ref(false);

// 用于切换 LiveGouwu 组件显示状态的函数
const toggleLiveGouwu = (event) => {
  event.stopPropagation(); // 阻止事件冒泡到文档
  showLiveGouwu.value = !showLiveGouwu.value;
};

// 处理文档点击事件
const handleDocumentClick = (event) => {
  // 检查点击是否发生在 LiveGouwu 组件外部
  if (showLiveGouwu.value && !event.target.closest('.live-gouwu-container')) {
    showLiveGouwu.value = false;
  }
};
const commentContainer = ref(null);
const currentIndex = ref(0);
const kzxx = ref(true);
const visibleCount = 5;
const showInputBox = ref(false); // 控制输入框显示/隐藏
const commentText = ref(''); // 绑定输入框的值
const liveData = ref(null);
const chatMessage = ref('');
const videoElement = ref(null); // 用于引用 video 元素
let flvPlayer = null; // 保存创建的播放器实例
// 定义props
const props = defineProps({
  roomId: {
    type: String,
    required: true
  },
  actUserId: {
    type: String,
    required: true
  }
});

// 其他响应式数据
const loading = ref(true);
const error = ref(null);
const comments = ref([
  { name: '花非花雾非雾米', intro: '漂亮' },
  // ... 其他评论对象
]);
const visibleComments = computed(() => {
  return comments.value.slice(currentIndex.value, currentIndex.value + visibleCount);
});

// 获取折扣数据


// 获取直播数据
async function fetchLiveData() {
  try {
    const response = await axios.get(`https://apis.netstart.cn/mogujie/live/actorLiveInfo?roomId=12515567&actorId=19gl78g`);
    liveData.value = response.data.data; // 假设响应体直接是你要的数据对象
  } catch (err) {
    error.value = err.message || '未知错误';
  } finally {
    loading.value = false;
  }
}

// 组件挂载时执行
onMounted(async () => {
  await fetchLiveData();
  document.addEventListener('click', handleDocumentClick);
  // 确保视频元素已正确挂载
  await nextTick(); // 使用 await 确保 DOM 更新完成
  if (flvjs.isSupported() && videoElement.value) {
    flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: 'https://tliveplay.mogujielive.com/live/335850479_12515579_SHD3low.flv'
    });
    flvPlayer.attachMediaElement(videoElement.value);
    flvPlayer.load();
  }
});

// 播放视频
const playVideo = () => {
  if (flvPlayer) {
    flvPlayer.play();
  }
  kzxx.value = false;
};

// 暂停视频
const zt = () => {
  if (flvPlayer) {
    flvPlayer.pause();
  }
  kzxx.value = true;
};

// 发送消息
function sendMessage() {
  console.log('Send message:', chatMessage.value);
  chatMessage.value = '';
}

// 切换输入框可见性
function toggleInputBox() {
  showInputBox.value = !showInputBox.value;
}

// 提交评论
function submitComment() {
  if (commentText.value) {
    // Logic to submit the comment
    console.log('Submitting comment:', commentText.value);
    // Clear the input field after submission
    commentText.value = '';
  }
}

// 组件卸载时销毁播放器
onBeforeUnmount(() => {
  if (flvPlayer) {
    flvPlayer.destroy();
  }
  document.removeEventListener('click', handleDocumentClick);
});
</script>
<style scoped>
.bf{
  position: fixed;
  width: 60rem;
  height: 60rem;
 
  font-size: 50rem;
  top: 40%;
 left: 40%;
  display: flex;
  justify-content:center;
  align-items:center ;
}
/* 基础重置 */
* {
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
  overflow: hidden;
}
.input-area {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.input-area input {
  width: 200px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
/* 视频容器 */
.live-container {
  position: relative;
  height: 100%;
  width: 100%;
}

/* 视频播放器 */
video {
  width: 100%;
  height: 100%;
}

/* 直播信息 */
.live-header {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, .1);
  border-radius: 100rem;
  padding: .1rem .2rem .1rem .15rem;
  width: 195rem;
  height: 47rem;
  justify-content: space-between;
}


.avatar {
  width: 35rem;
  height: 35rem;
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
  margin-right: -5rem;
  margin-top: 5rem;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  border: 1rem solid #999;
  float: left;
}

.live-info {
  color: white;
  font-size: 8rem;
  font-weight: 700;
}

.live-info p {
  font-size: 10rem;
  margin-left: 15rem;
}

.live-info button {
  font-size: 10px; /* 减小字体大小以匹配右边的按钮 */
  width: 60rem; /* 如果右边的按钮更小，减小这个值 */
  height: 21rem; /* 如果右边的按钮更小，减小这个值 */
  background-image: -webkit-linear-gradient(317deg, #ff5777, #ff469f);
  background-image: linear-gradient(133deg, #ff5777, #ff469f);
  color: #fff;
  border-radius: 10rem;
  position: absolute;
  top: 3rem; /* 根据右边按钮的位置调整 */
  left: 120rem; /* 根据右边按钮的位置调整 */
  text-align: center; /* 这个属性对于按钮内部的文本居中不是必需的，因为已经使用了flex */
  display: flex;
  justify-content: center; /* 确保水平居中 */
  align-items: center; /* 确保垂直居中 */
}
.live-info h2 {
  margin-left: 5rem;
}

/* 商品列表 */
.live-sidebar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.item-image {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

/* 聊天区域 */
#chat {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

#chat .message {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

#chat .message .user {
  font-weight: bold;
}

#chat .message .text {
  margin-left: 10px;
}

#chat .message .timestamp {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

#chat .message .like {
  float: right;
  margin-left: 10px;
  cursor: pointer;
}

#chat .message .like:hover {
  color: red;
}

#chat .message .like::before {
  content: '👍';
}

/* 聊天输入框 */
#chat input {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 16px;
}

#chat input:focus {
  outline: none;
}

.member-entry {
  position: relative;
  z-index: 2;
  margin-top: 10rem;
  margin-left: 10rem;
  width: 110rem;
  height: 28rem;
  padding-right: .15rem;
  border-radius: 100rem;
  background: hsla(0, 0%, 100%, .7);
  color: #ff5777;
  position: absolute;
  top: 60px;
  left: 0;
}

.roll-view[data-v-04927175] {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.roll-view-animat-wrapper[data-v-04927175] {
  display: flex;
  height: 100%;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  will-change: transform;
}


.f-cross-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.f-cross-center .diamond-icon {
  width: 17rem;
  height: 17rem;
  margin-left: -50rem;
}
.recommend-goods {
    margin-top: 1rem;
    margin-left: 1rem;
    padding: .08rem .08rem .08rem .09rem;
    width: 63rem;
    height: 58rem;
    border-radius: 8rem;
    background-color: rgba(0, 0, 0, .2);
}
.recommend-goods img{
  width: 85rem;
  height: 85rem;
}
.recommend-goods {
  display: flex;
  flex-wrap: wrap;
}

.goods-item {
  width: calc(50% - 10px);
  margin: 5px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.image-container {
  width: 100%;
  height: 100px;
  background-size: cover;
  background-position: center;
  border-radius: 5px;
}

.spike-icon-doing {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #ff6b6b;
  color: white;
  padding: 5px;
  border-radius: 5px;
}

.title {
  font-weight: bold;
  margin-top: 10px;
}

.price {
  margin-top: 5px;
  font-size: 18px;
  color: #ff6b6b;
}

button {
  background-color: #ff6b6b;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background-color: #ff4d4d;
}
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: 167rem;
  height: 45rem;
}

.member-entry .task-num {
  margin-left: 6rem;
  width: 14rem;
  height: 14rem;
  background-color: #fff;
  border: 1rem solid #ff5777;
  border-radius: 50%;
  color: #ff5777;
  font-size: .26rem;
  text-align: center;
}

.f-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.live .foot-section {
  margin: .2rem .2rem .3rem;
}

.f-jc-sb[data-v-29a4d929] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 355rem;
  height: 45rem;
  position: absolute;
  top: 570rem;
  left: 5rem;
}

.icon-sell-bag {
  width: 45rem;
  height: 45rem;
  position: relative;
  background-image: url(https://s10.mogucdn.com/mlcdn/c45406/200901_2fib9eb2clidj808d84f5ffaj224e_90x90.gif);
  background-size: cover;
}

.sell-bag-num {
  position: absolute;
  top: 155rem;
  left: 5rem;
  width: 22rem;
  height: 22rem;
  text-align: center;
  color: #fff;
  font-size: .28rem;
}

.comment-box {
  width: 115rem;
  height: 35rem;
  line-height: 26rem;
  color: #fff;
  background: rgba(0, 0, 0, .2);
  padding: 1rem 12.5rem;
  border-radius: 15rem;
  margin: 7.5rem 0 0 7.5rem;

}

.fans-click[data-v-29a4d929] {
  margin-top: .16rem;
}

.icon-comment,
.icon-Share {
  width: 35rem;
  height: 35rem;
  background-color: rgba(0, 0, 0, .3);
  border-radius: 50%;
  background-size: 14rem 14rem;
  background-repeat: no-repeat;
  background-position: 50%;
  z-index: 1;

}
.centered-bottom-modal {
  position: fixed;
  bottom: 0;
  left: 52%;
  transform: translateX(-50%);
  width: 90%; /* 根据需要调整宽度 */
  max-width: 600px;
  background-color: #140f0f;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1;
  overflow-y: auto; /* 允许垂直滚动 */
  max-height: 80vh; /* 限制最大高度，根据需要调整 */
}
.icon-comment {
  background-image: url(https://s10.mogucdn.com/mlcdn/c45406/200828_0h84kb85cb5cjkjkg4534a40j85jg_33x32.png);
}

.icon-Share {
  margin-right: -10rem;
  background-image: url(https://s10.mogucdn.com/mlcdn/c45406/180831_46dejfii12hki90hig4h3e8lahaia_60x63.png);
  position: absolute;
  top: 6rem;
  left: 280rem;
  border-radius: 50%;
  background-size: 20rem 20rem;
  background-repeat: no-repeat;
  background-position: 50%;
}

.official-tip {
  margin-bottom: 1rem;
  font-size: 12rem;
  color: #fff;
  width: 275rem;
  height: 45rem;
  position: absolute;
  top: -50rem;
  left: 0;
  z-index: 1;
}

.notice {
  padding: .1rem .16rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 30rem;
  border-radius: .1rem;
  background-color: rgba(0, 0, 0, .1);
  font-size: 12px;
  width: 183rem;
}
.comment {
  margin-bottom: 1rem;
}
.comments-list {
  position: absolute;
  bottom: 120px;
  /* 调整为合适的高度，留出底部空间 */
  left: 0;
  width: 300rem;
  height: calc(30% - 60px);
  /* 减去底部输入框的高度 */
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  overflow-y: auto;
}
.comments-list::-webkit-scrollbar {
  width: 5px;
}
.comments-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
}
.name {
  color: #ff5777;
  margin-right: 5rem;
  white-space: nowrap;
}
.intro {
  color: #fff;
  width: 100%;
  height: 100%;
  font-size: 10rem;
  margin-left: 5rem;
  margin-top: 15rem;
}
.icon-weChatFriends {
  background-image: url(https://s10.mogucdn.com/p2/161021/upload_21j42fdkj48a85gdi616g116jf49k_40x40.png);
}

.icon-weChat {
  background-image: url(https://s10.mogucdn.com/p2/161021/upload_75g315bagd51flhflgfkf2ll6klci_40x40.png);
}

.icon-comment {
  margin-left: 5rem;
  width: 35rem;
  height: 35rem;
  border-radius: 50%;
  background-size: 20rem 20rem;
  background-repeat: no-repeat;
  background-position: 50%;
  position: absolute;
  top: 6rem;
  left: 320rem;
}
.intro-one {
  margin-left: 7rem;
  font-size: 12rem;
}
html,
body {
  width: 100vw;
  height: 667rem;
}
.recommend-goods{
  z-index:1;
  width:355rem;
  height:432rem;
}
.focus-actor {
    background: #776e71;
    border-radius: 100rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 196px;
    height: 47px;
    position: absolute;
    top:10rem;
    left:5rem;
}
.focus-actor .actor-avatar {
    position: relative;
    margin-right: 0.5rem;
    margin-top: 2.5rem;
    width: 35rem;
    height: 35rem;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    border: 1rem solid #999;
    float: left;
}
.focus-actor .info {
    margin: 0.5rem 7.5rem 0 0;
    color: #fff;
    float: left;
    width: 87rem;
    height: 30rem;
}
.focus-actor .actor-name {
    font-weight: 700;
    width: 87rem;
    height: 14rem;
}
.lh-1 {
    line-height: 1;
}
.focus-actor .online-num {
  width: 87rem;
  height: 16rem;
}
.focus-actor .actor-fans {
    float: left;
    margin-top: 6rem;
}
.focus-actor .focus-btn, .focus-actor .has-subscribe-btn-btn, .focus-actor .subscribe-btn {
    font-size: 12px;
    height: 25rem;
    background-image: -webkit-linear-gradient(317deg, #ff5777, #ff469f);
    background-image: linear-gradient(133deg, #ff5777, #ff469f);
    color: #fff;
    width: 44rem;
}
.focus-actor .focus-btn, .focus-actor .subscribe-btn {
    width: 44rem;
    border-radius: 10rem;
    height: 25rem;
    }
</style>

